var path = require('path');
var webpack = require('webpack');

//module.exports 导出这个配置对象，供webpack在合并时候进行操作
module.exports = {
    entry: path.resolve(__dirname, 'src/js/app.js'),//这是我们需要合并的源文件
    output:{// 是我们将来要输出的目标文件的相关属性
        path: path.resolve(__dirname, 'dist'),//输出的路径
        filename: 'bundle.js'//输出的文件名
    },
    plugins:[ // 插件的意思，可以放好多的插件，因为它是一个数组
        new webpack.HotModuleReplacementPlugin()//设置热更新插件
    ],
    module:{ // 配置一些模块
        rules:[ // 会有很多很多的loader模块规则
            {//用来处理CSS文件的loader配置项
                test:/\.css$/,
                use:['style-loader', 'css-loader'] // 这个用test匹配到的CSS文件，用use里面的loader进行处理
            },
            {
                test:/\.(jpg|png|gif)$/,
                use:'url-loader?limit=20000' // 用这个url-loader，来处理图片相关的文件
            },
            {
                test:/\.scss$/,
                use:['style-loader', 'css-loader', 'sass-loader'] //使用sass-loader处理sass文件的打包
            },
            {
                test:/\.jsx?$/,
                use:{ // use可以是一个对象
                    loader:'babel-loader', //转换器的名字
                    options:{ //babel-loader的配置选项
                        presets:['es2015', 'react', 'stage-0']// 配置转换的语法格式
                    }
                }
            }
        ]
    }
}